{% extends "layout.html" %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
{% endblock %}

{% block content %}
<div class="auth-wrapper">
    <div class="auth-card">
        <div class="auth-header">
            <h2>创建账户</h2>
            <p>加入我们的徒步社区</p>
        </div>

        <form method="POST" action="{{ url_for('auth.register') }}" class="auth-form" id="registerForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" required>
            </div>

            <div class="form-group">
                <label for="email">电子邮箱</label>
                <input type="email" id="email" name="email" placeholder="请输入电子邮箱" required>
                <button type="button" id="send-verification" class="btn-verify">发送验证码</button>
            </div>

            <div class="form-group" id="email-verify-group" style="display:none;">
                <label for="email_verification_code">邮箱验证码</label>
                <input type="text" id="email_verification_code" name="email_verification_code" placeholder="请输入收到的验证码">
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required>
            </div>

            <div class="form-group">
                <label for="confirm_password">确认密码</label>
                <input type="password" id="confirm_password" name="confirm_password" placeholder="请再次输入密码" required>
            </div>

            <!-- 验证码部分 -->
            <div class="form-group">
                <label for="captcha">验证码</label>
                <div class="captcha-container">
                    <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" required>
                    <img id="captcha-image" src="{{ url_for('auth.captcha') }}" alt="验证码" onclick="refreshCaptcha()">
                </div>
                <small class="captcha-hint">看不清？点击图片刷新验证码</small>
            </div>

            <button type="submit" class="auth-btn-register">
                <span>注册</span>
            </button>

            <div class="auth-footer">
                已有账户? <a href="{{ url_for('auth.login') }}">立即登录</a>
            </div>

            {% with messages = get_flashed_messages() %}
                {% if messages %}
                    <div class="alert-message error">
                        {{ messages[0] }}
                    </div>
                {% endif %}
            {% endwith %}
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 刷新验证码
    function refreshCaptcha() {
        var captchaImage = document.getElementById('captcha-image');
        captchaImage.src = "{{ url_for('auth.captcha') }}?t=" + new Date().getTime();
    }

    // 发送邮箱验证码
    document.getElementById('send-verification').addEventListener('click', function() {
        const email = document.getElementById('email').value;
        if (!email) {
            alert('请输入邮箱地址');
            return;
        }

        // 禁用按钮防止重复发送
        this.disabled = true;
        this.textContent = '发送中...';

        fetch('{{ url_for("auth.send_verification_email") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({email: email})
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('验证码已发送到您的邮箱，请查收');
                document.getElementById('email-verify-group').style.display = 'block';
                // 60秒后重新启用按钮
                let seconds = 60;
                const timer = setInterval(() => {
                    this.textContent = `重新发送(${seconds}s)`;
                    seconds--;
                    if (seconds < 0) {
                        clearInterval(timer);
                        this.disabled = false;
                        this.textContent = '发送验证码';
                    }
                }, 1000);
            } else {
                alert(data.message || '发送验证码失败');
                this.disabled = false;
                this.textContent = '发送验证码';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('请求失败，请重试');
            this.disabled = false;
            this.textContent = '发送验证码';
        });
    });
</script>
{% endblock %}